'use strict'
import React from 'react'
import style from './css.css'
class Apps extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      date: new Date(),
    }
  }
  componentDidMount() {
    this.timerID = setInterval(
      () => { this.tick(); },
      1000
    );
  }
  componentWillUnmount() {
    clearInterval(this.timerId)
  }
  tick() {
    this.setState({
      date: new Date()
    });
  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    )
  }
}

class Text extends React.Component {
  constructor() {
    super();
    this.state = {
      name: ' world!',
      age: 12,
    };
  }

  preventPop(e) {    //事件对象e要放在最后
    // e.preventDefault();
    this.setState({
      name:'asdf'
    })

  }
  render() {
    return (
      // <div onClick={(e)=> this.preventPop(this.state.name,e)}>Hello</div>
      <div onClick={this.preventPop.bind(this)}>Hello{this.state.name}</div>
    )
  }
}
class Login extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLogin: true
    }
  }
  loginClock() {
    console.log(this.state.isLogin)

    this.setState({
      isLogin: false
    })

  }
  logoutClock() {
    this.setState({
      isLogin : true
    })
  }
  render() {
    const isLogin = this.state.isLogin; 
    let button = null;
    if (isLogin) {
      button = <LoginButton onClick={this.loginClock.bind(this)} />
    } else {
      button = <LogoutButton onClick={this.logoutClock.bind(this)} />
    }

    return (
      <div>
        {button}
        <Greeting isLogin={isLogin} />

      </div>
    )
  }
}
function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}
function Greeting(props) {
  const islogin = props.isLogin
  console.log(islogin)
  return islogin||false?<LoginText />:<LogoutText />;

  // if (islogin) {
  //  return <LoginText />
  // } else {
  //   return  <LogoutText />
  // }
}
function LoginText(props) {
  return (
    <h1 onClick={props.onClick}>
      golockout
  </h1>
  )
}
function LogoutText(props) {
  return (
    <h1 onClick={props.onClick}>
      golockin
  </h1>
  )
}


function App() {
  return (
    <div>
      <Apps />
      <Text /> 
      <Login/>
    </div>
  );
}

export default App
